<script setup>
import { ref , onActivated, onDeactivated } from 'vue';
import router from '@/router';

function addclick(id) {
	id = JSON.stringify(id)
	router.push({
            name:'finddetail',
            query:{
                id: id,
            }
        })
}

const contentRef = ref()

const top = ref(0)
function scrollTop(event) {
    // console.log(event.target.scrollTop);
    top.value = event.target.scrollTop
}



const props = defineProps(['sourceList'])

</script>

<template>
    <div class="content"  ref="contentRef" @scroll="scrollTop">
			<input style="color: black;" type="text">
			<div class="box"  v-for="item in sourceList" :key="item.id">
				<div class="line1">
					<div><span>{{item.from}}</span><img src="/imgs/u10.svg" alt=""><span>{{item.to}}</span></div>
					<button class="button" @click="addclick(item)">我要接单</button>
					<div style="color: red;">￥{{item.price}}</div>
				</div>
				<div class="line2">
					<div style="margin-bottom: 15px;"><span style="color: #999;">装车时间：</span><span>{{item.time}}</span>
					</div>
					<div><span style="color: #999;">货物信息：</span><span>{{item.goodstype}}/ {{item.weight}}吨/ {{item.volume}}方</span></div>
				</div>
			</div>
		</div>
</template>

<style lang="scss" scoped>

.box {
	color: black;
	// height: 115px;
	margin: 20px;
	background-color: white;
	border-radius: 15px;
	padding: 20px;

	.line1 {
		font-weight: 500;
		font-style: normal;
		font-size: 16px;
		display: flex;
		justify-content: space-between;

		img {
			margin: 0 10px;
		}

		.button {
			position: relative;
			top: 78px;
			right: -88px;
			background-color: white;
			color: #1678ff;
			border: 1px solid #1678ff;
			font-size: 12px;
			width: 80px;
			height: 30px;
			border-radius: 15px;
		}
	}

	.line2 {
		margin-top: 30px;
	}


}
</style>